<template>
  <div class="member-box">
        <!-- 搜索框 -->
        <div class="search-box flex-center flex-between">
            <div class="search-left flex-center" @click="back">
                <i class="van-icon van-icon-arrow-left van-nav-bar__arrow"></i><span class="van-nav-bar__text">返回</span>
            </div>
            <div class="search-right">
                <van-search
                v-model="search"
                show-action
                :placeholder="'请输入微信昵称'"
                @search="onSearch"
                >
                    <template #action>
                        <div @click="onSearch">搜索</div>
                    </template>
                </van-search>
            </div>
        </div>
        <!-- 列表 -->
        <div class="main-box" ref="mainBox">
            <div class="demo-preview flex-around box-style" v-for="item,index in dataList" :key="index">
                <img :src="item.headimgurl">
                <div class="demo-content">
                    <h3>{{ item.nickname }}</h3>
                    <p>登录时间：{{item.create_time}}</p>
                    <p>最近登录时间：{{item.last_time}}</p>
                </div>
            </div>
            <div class="title" v-if="(dataList.length < total) && (loading == true)">加载中,请稍后...</div>
            <div class="title" v-if="dataList.length == total">没有数据啦</div>
        </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
        search:'',
        loading: false,
        dataList:[{
            headimgurl:"https://thirdwx.qlogo.cn/mmopen/vi_32/nic78IZ7GSSUW4iaNuBo1CfRVpqicTvcssXfxiasCfgznafgpM0rzibwqjB5xc6NVHgUTu7rKEiawRXS1eQOawv39bvA/132",
            nickname: "star",
            last_time: "2023-11-03 11:28:35",
            create_time: "2023-10-30 13:28:30"
        },{
            headimgurl:"https://thirdwx.qlogo.cn/mmopen/vi_32/nic78IZ7GSSUW4iaNuBo1CfRVpqicTvcssXfxiasCfgznafgpM0rzibwqjB5xc6NVHgUTu7rKEiawRXS1eQOawv39bvA/132",
            nickname: "star",
            last_time: "2023-11-03 11:28:35",
            create_time: "2023-10-30 13:28:30"
        }],
        page: 1, // 当前页数
        total:2,
        limit:5,
        loading:false
    }
  },
  created(){},
  mounted(){
    this.$refs.mainBox.addEventListener('scroll',this.scroll,true)
  },
  methods:{
    back(){
        this.$router.back()
    },
    onSearch() {
        console.log(this.search)
    },
    scroll() {
      const scrollTop = this.$refs.mainBox.scrollTop
      const windowHeight = this.$refs.mainBox.clientHeight
      const scrollHeight = this.$refs.mainBox.scrollHeight
      if (scrollTop + windowHeight >= scrollHeight ) {
          if(this.dataList.length >= this.total){
              this.loading = false
              console.log('没有数据啦')
          }else{
              this.loading = true
              this.page += 1
              console.log(this.page,'加载中')
              // 调用请求
          }
      }
    },
  },
}
</script>
<style scoped lang="scss">
.member-box{
    width: 100%;
    height: 100vh;
    text-align: left;
    background-color: #f8f8f8;
}
.search-box{
    width: 100%;
    height: 46px;
    padding: 0 16px;
    background-color: #fff;
    .search-left{
        width: 48px;
        .van-nav-bar__arrow{
            color: #1989fa;
        }
    }
    .search-right{
        width: calc(100% - 60px);
        .van-search{
            padding: 0;
        }
    }

    .van-search__content {
        background-color: #f7f7f7;
    }
}
.main-box{
    width: 100%;
    height: calc(100% - 46px);
    overflow-y: auto;
    .demo-preview{
        width: 95%;
        height: 100px;
        // background-color: pink;
        margin: 10px auto 0 auto;
        padding: 10px;
        img{
            width: 50px;
            height: 50px;
            border-radius: 25px;
        }
        p{
            margin: 5px 0;
        }
        h3{
            margin: 6px 0;
        }
    }
    .title{
        width: 100%;
        text-align: center;
        margin-top: 20px;
    }
}
</style>